﻿@page "/NumberField"

@using FluentUI.Demo.Shared.Pages.NumberField.Examples

<PageTitle>@App.PageTitle("NumberField")</PageTitle>

<h1>Number field</h1>

<p>An implementation of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/text" target="_blank" rel="noopener noreferrer">text field</a>. The <code>&lt;FluentNumberField&gt;</code> supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.</p>

<p>
    <code>&lt;FluentNumberField&gt;</code> wraps the <code>&lt;fluent-number-field&gt;</code> element, a web component implementation of a number input field leveraging the
    Fluent UI design system.
</p>

<blockquote>
    <p>
        <strong>Note:</strong> The underlying web component is known to have <a href="https://github.com/microsoft/fast/issues?q=is%3Aissue+numberfield+is%3Aclosed">quite some issues</a>
        which won't get fixed (and can't be fixed on out side). Be carefull when choosing to use this component.
    </p>
    <p>
        Also, we'd advise in general to not use a NumberField for this kind of input See also <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">this article</a> for reasons and alternatives
    </p>
    <p>
        As an alternative, you could consider using a <a href="https://github.com/microsoft/fluentui-blazor/issues/1345#issuecomment-2145145944">standard InputNumber with styling applied</a>.
    </p>
</blockquote>


<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(NumberFieldDefault)" ></DemoSection>

<DemoSection Title="Types" Component="@typeof(NumberFieldTypes)"></DemoSection>

<DemoSection Title="Displays" Component="@typeof(NumberFieldDisplays)"></DemoSection>

<DemoSection Title="Icons"Component="@typeof(NumberFieldIcons)"></DemoSection>

<DemoSection Title="Focus" Component="@typeof(NumberFieldFocus)"></DemoSection>

<DemoSection Title="Filled Appearance" Component="@typeof(NumberFieldFilled)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentNumberField<>)" InstanceTypes="@(new[] {typeof(int)})" GenericLabel="TValue">
    <Description>
        <code>TValue</code> can be one of the following <code>Type</code>'s:
        <ul>
            <li><code>int</code></li>
            <li><code>long</code></li>
            <li><code>short</code></li>
            <li><code>float</code></li>
            <li><code>double</code></li>
            <li><code>decimal</code></li>
        </ul>
    </Description>
</ApiDocumentation>
